<script>

export default {
  name: 'RegisterForm',
  data() {
    return {
      schema: {
        name: 'required|min:3|max:100|alpha_spaces',
        email: 'required|min:3|max:100|email',
        age: 'required|min_value:18|max_value:100',
        password: 'required|min:3|max:100',
        confirmed_password: 'passwords_mismatch:@password',
        country: 'required|country_excluded:Antarctica',
        tos: 'tos',
      },
      userData: {
        country: 'USA',
      },
      reg_in_submission: false,
      reg_show_alert: false,
      reg_alert_variant: 'bg-blue-500',
      reg_alert_msg: '请等一下,我们正在为你创建账户!',
    };
  },
  methods: {
    async register(values) {
      this.reg_show_alert = true;
      this.reg_in_submission = true;
      this.reg_alert_variant = 'bg-blue-500';
      this.reg_alert_msg = '请等一下,我们正在为你创建账户!';
      try {
        await this.$store.dispatch('register', values);
      } catch (error) {
        this.reg_in_submission = false;
        this.reg_alert_variant = 'bg-red-500';
        this.reg_alert_msg = '有个未知的错误,请你重新尝试注册!';
        return;
      }
      this.reg_alert_variant = 'bg-green-500';
      this.reg_alert_msg = '恭喜你,账号注册成功了,你现在可以使用了！';
      window.location.reload();
    },
  },
};
</script>

<template>
  <!-- Registration Form -->
  <div class="text-white text-center font-bold p-5 mb-4"
       v-if="reg_show_alert" :class="reg_alert_variant">
    {{ reg_alert_msg }}
  </div>
  <vee-form :validation-schema="schema" @submit="register" :initial-values="userData">
    <!-- Name -->
    <div class="mb-3">
      <label class="inline-block mb-2">姓名</label>
      <vee-field as="input" type="text" name="name"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
               duration-500 focus:outline-none focus:border-black rounded"
                 placeholder="请输入您的姓名"/>
      <ErrorMessage  class="text-red-600" name="name" />
    </div>
    <!-- Email -->
    <div class="mb-3">
      <label class="inline-block mb-2">邮箱</label>
      <vee-field type="email" name="email"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
                  duration-500 focus:outline-none focus:border-black rounded"
                 placeholder="请输入您的邮箱" />
      <ErrorMessage  class="text-red-600" name="email" />
    </div>
    <!-- Age -->
    <div class="mb-3">
      <label class="inline-block mb-2">年龄</label>
      <vee-field type="number" name="age"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
                  duration-500 focus:outline-none focus:border-black rounded" />
      <ErrorMessage class="text-red-600" name="age" />
    </div>
    <!-- Password -->
    <div class="mb-3">
      <label class="inline-block mb-2">密码</label>
      <vee-field type="password" name="password"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
                  duration-500 focus:outline-none focus:border-black rounded"
                 placeholder="请输入密码" />
      <ErrorMessage class="text-red-600" name="password" />
    </div>
    <!-- Confirm Password -->
    <div class="mb-3">
      <label class="inline-block mb-2">确认密码</label>
      <vee-field type="password" name="confirmed_password"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
                  duration-500 focus:outline-none focus:border-black rounded"
                 placeholder="请确认密码" />
      <ErrorMessage class="text-red-600" name="confirmed_password" />
    </div>
    <!-- Country -->
    <div class="mb-3">
      <label class="inline-block mb-2">国家</label>
      <vee-field as="select" name="country"
                 class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
                  duration-500 focus:outline-none focus:border-black rounded">
        <option value="USA">美国</option>
        <option value="Mexico">墨西哥</option>
        <option value="Germany">德国</option>
        <option value="Antarctica">南极洲</option>
      </vee-field>
      <ErrorMessage class="text-red-600" name="country" />
    </div>
    <!-- TOS -->
    <div class="mb-3 pl-6">
      <vee-field type="checkbox" name="tos" value="1"
                 class="w-4 h-4 float-left -ml-6 mt-1 rounded inline-block" />
      <label class="inline-block">同意所有条款</label>
      <ErrorMessage class="text-red-600 block" name="tos" />
    </div>

    <button type="submit" :disabled="reg_in_submission"
            class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition
                hover:bg-purple-700">
      提交
    </button>
  </vee-form>
</template>
